<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>幼儿页</title>
  <script src="../js/jquery-3.5.1.min.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
          integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
          crossorigin="anonymous"></script>

  <script type="text/javascript" th:inline="javascript">
    var modify = 1;

    function clear() {
      $("#id").val("");
      $("#name").val("");
      $("#age").val("");
      $("#male").prop('checked',false);
      $("#female").prop('checked',false);
      $("#img").val("");
      $("#address").val("");
      $("#gradeSelect").html("");
      $("#parentSelect").html("");
    }

    function add() {
      modify = 1;
      clear();
      $(".modal-title").html("幼儿添加");
      prep(0);
    }

    function edit(id) {
      modify = 0;
      $(".modal-title").html("幼儿信息编辑");
      prep(id);
    }

    function prep(id){
      $.get("/child/prepare",{id:id},function(map){
        let grades = map["grades"];
        let parents = map["parents"];
        let gradeSelect = $("#gradeSelect");
        let parentSelect = $("#parentSelect");
        let child;
        if (id != 0){
          child = map["child"];
          $("#id").val(id);
          $("#name").val(child.name);
          $("#age").val(child.age);
          if (child.gender==0){
            $("#male").prop('checked',true);
          }else if (child.gender==1){
            $("#female").prop('checked',true);
          }
          $("#address").val(child.address);
        }
        gradeSelect.append("<option value='0'>--请选择--</option>");
        for(let grade of grades){
          if (child!=null && child.id!=null && child.gradeId==grade.id){
            gradeSelect.append("<option value='"+grade.id+"' selected>"+grade.name+"</option>");
          }else {
            gradeSelect.append("<option value='"+grade.id+"'>"+grade.name+"</option>");
          }
        }
        parentSelect.append("<option value='0'>--请选择--</option>");
        for(let parent of parents){
          if (child!=null && child.id!=null && child.parentId==parent.id){
            parentSelect.append("<option value='"+parent.id+"' selected>"+parent.name+"</option>");
          }else {
            parentSelect.append("<option value='"+parent.id+"'>"+parent.name+"</option>");
          }
        }
      },"json");
    }

    function save() {
      let name = $("#name").val();
      let age = $("#age").val();
      let address = $("#address").val();
      let maleCheck = document.getElementById("male").checked;
      let femaleCheck = document.getElementById("female").checked;
      if (name == ''){
        alert("请输入姓名!");
      } else if (age == ''){
        alert("请输入年龄!");
      } else if (!maleCheck && !femaleCheck){
        alert("请选择性别!");
      }else if (address == ''){
        alert("请输入地址!");
      } else{
        let formData = new FormData($("#editForm")[0]);
        $.ajax({
          url: "http://localhost:313/child/save?modify=" + modify,
          method: "post",
          data: formData,
          dataType: "json",
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function (res) {
            $("#editModal").modal('hide');
            location.reload();
          }
        });
      }
    }

    function del(id) {
      if (confirm("请确认是否删除？")) {
        $.get("/child/del", {id: id}, function (res) {
          if (res) {
            location.reload();
          }
        })
      }
    }

    let gradeId = [[${gradeId}]];
    function search() {
      let name = $("#condition").val();
      if (gradeId == null) {
        window.location.href = "http://localhost:313/child/page?name=" + name;
      }else {
        window.location.href = "http://localhost:313/grade/pageChildren?name=" + name + "&id=" + gradeId;
      }
    }

    function inputLoad() {
      let searchInput = [[${name}]];
      if (searchInput != null) {
        $("#condition").val(searchInput);
      }
    }

    function homePage() {
      let name = $("#condition").val();
      if (gradeId == null) {
        window.location.href = "http://localhost:313/child/page?pageNum=1&name=" + name;
      }else {
        window.location.href = "http://localhost:313/grade/pageChildren?pageNum=1&name=" + name + "&id=" + gradeId;
      }
    }

    function prePage() {
      let name = $("#condition").val();
      if (gradeId == null){
        window.location.href = "http://localhost:313/child/page?pageNum=" + [[${current - 1}]] + "&name=" + name;
      }else {
        window.location.href = "http://localhost:313/grade/pageChildren?pageNum=" + [[${current - 1}]] + "&name=" + name + "&id=" + gradeId;
      }

    }

    function nextPage() {
      let name = $("#condition").val();
      if (gradeId == null) {
        window.location.href = "http://localhost:313/child/page?pageNum=" + [[${current + 1}]] + "&name=" + name;
      }else {
        window.location.href = "http://localhost:313/grade/pageChildren?pageNum=" + [[${current + 1}]] + "&name=" + name + "&id=" + gradeId;
      }
    }

    function lastPage() {
      let name = $("#condition").val();
      if (gradeId == null) {
        window.location.href = "http://localhost:313/child/page?pageNum=" + [[${lastPage}]] + "&name=" + name;
      }else {
        window.location.href = "http://localhost:313/grade/pageChildren?pageNum=" + [[${lastPage}]] + "&name=" + name + "&id=" + gradeId;
      }
    }
  </script>
</head>
<style>
  table {
    text-align: center;
  }

  #searchButton {
    position: absolute;
    margin-top: -1px;
  }
</style>
<body onload="inputLoad()">
<h1>幼儿页</h1>
<div class="row" th:if="${session.user.identityNum == 1 || session.user.identityNum == 3}">
  <div class="col-lg-3">
    <div class="input-group" >
      <input id="condition" type="text" class="form-control" placeholder="请输入幼儿姓名">
      <span class="input-group-btn">
                            <button class="glyphicon glyphicon-search btn btn-default" id="searchButton"
                                    onclick="search()">
                            </button>
                    </span>
    </div>
  </div>
</div>
<button th:if="${session.user.identityNum == 3}" id="add" class="btn btn-success" data-toggle="modal" data-target="#editModal" onclick="add()">新增</button>
<table class="table  table-bordered table-hover">
  <tr>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
    <td>图片</td>
    <td>地址</td>
    <td>班级</td>
    <td>家长信息</td>
    <td th:if="${session.user.identityNum == 3}">操作</td>
  </tr>
  <tr th:each="child:${childs}">
    <td th:text="${child.name}"></td>
    <td th:if="${child.gender} eq '0'">男</td>
    <td th:if="${child.gender} eq '1'">女</td>
    <td th:text="${child.age}"></td>
    <td><img th:src="${child.img}" width="80px" height="80px"></td>
    <td th:text="${child.address}"></td>
    <td th:text="${child.gradeName}"></td>
    <td><a th:text="${child.parentName}" th:href="'/child/getParent?parentId='+${child.parentId}"></a></td>
    <td th:if="${session.user.identityNum == 3}">
      <a class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#editModal"
         th:onclick="edit([[${child.id}]])"></a>&nbsp;&nbsp;
      <a class="glyphicon glyphicon-trash" th:onclick="del([[${child.id}]])"></a>
    </td>
  </tr>
  <tr>
    <td colspan="8">
      <button class="btn btn-primary" onclick="homePage()">首页</button>&nbsp;&nbsp;<button class="btn btn-primary"
                                                                                          onclick="prePage()">上一页
    </button>&nbsp;&nbsp;<p style="display: inline" th:text="'总共'+${total}+'条记录 当前第'+${current}+'页'"></p>&nbsp;&nbsp;<button
            class="btn btn-primary" onclick="nextPage()">下一页
    </button>&nbsp;&nbsp;<button class="btn btn-primary" onclick="lastPage()">尾页</button>
    </td>
  </tr>
</table>


<div class="modal fade" tabindex="-1" role="dialog" id="editModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h2 class="modal-title"></h2>
      </div>
      <div class="modal-body">
        <form id="editForm">
          <table class="table table-bordered table-striped">
            <input id="id" class="form-control" type="hidden" name="id" hidden/>
            <tr>
              <td>姓名</td>
              <td><input id="name" class="form-control" type="text" name="name" /></td>
            </tr>
            <tr>
              <td>年龄</td>
              <td><input id="age" class="form-control" type="number" name="age" /></td>
            </tr>
            <tr>
              <td>性别</td>
              <td><input id="male" type="radio" name="gender" value="0"/>男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="female" type="radio" name="gender" value="1"/>女</td>
            </tr>
            <tr>
              <td>图片</td>
              <td>
                <input id="file" name="file" type="file" class="form-control">
              </td>
            </tr>
            <tr>
              <td>地址</td>
              <td><input id="address" class="form-control" type="text" name="address" /></td>
            </tr>
            <tr>
              <td>家长</td>
              <td>
                <select id="parentSelect" class="form-control" name="parentId">
                </select>
              </td>
            </tr>
            <tr>
              <td>班级</td>
              <td>
                <select id="gradeSelect" class="form-control" name="gradeId">
                </select>
              </td>
            </tr>
          </table>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="save()">保存</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>